<template>
    <div class="mb-5">
        <CardTitle 
            :titles="cardTitleParam.titles" 
            :cardBgColor="cardTitleParam.cardBgColor" 
            @addFrom="openAddDialog"
        />
        <CardList
            :cardList="cardListParam.cardList" 
            :listField="cardListParam.listField"
            :operates="cardListParam.operates"
            @editTemplate="openEditDialog"
            @delTempplate="openDelDialog" 
        />
    </div>
     <!-- 新增配置 -->
     <MyDialog ref="addDialog"  title="新增模板" @cancel="resetAddForm" @confirm="addTemplate($event)">
        <MyForm :form="addFrom" ref="myFormRef" :rules="rules" labelWidth="100px">
            <el-form-item label="仓库模块" prop="key">
                <el-select v-model="addFrom.key" placeholder="请选择模板类型" @change="keyChange(addFrom.key)">
                    <el-option v-for="(item, index) in data.warehouseModules" :label="item.codeName"
                        :value="item.code" :key="index" />
                </el-select>
            </el-form-item>
            <el-form-item label="主数据源" prop="value">
                <el-select v-model="addFrom.value" placeholder="请选择模板类型" :disabled="data.disabled" :clearable="true">
                    <el-option v-for="(item, index) in data.datasources" :label="item.codeName"
                        :value="item.code" :key="index" />
                </el-select>
            </el-form-item>
            <el-form-item label="备用数据源" prop="spareValue">
                <el-select v-model="addFrom.spareValue" placeholder="请选择模板类型" :disabled="data.disabled">
                    <el-option v-for="(item, index) in data.datasources" :label="item.codeName"
                        :value="item.code" :key="index" />
                </el-select>
            </el-form-item>
        </MyForm>
    </MyDialog>
    <!-- 编辑配置 -->
    <MyDialog ref="editDialog" title="编辑模板" @confirm="editTemplate($event)">
        <MyForm :form="editFrom" ref="myFormRef" :rules="rules" labelWidth="100px">
            <el-form-item label="AI接入点" prop="key">
                <el-select v-model="editFrom.key" placeholder="请选择模板类型" disabled>
                    <el-option v-for="(item, index) in data.warehouseModules" :label="item.codeName" 
                        :value="item.code" :key="index" />
                </el-select>
            </el-form-item>
            <el-form-item label="主AI模型" prop="value">
                <el-select v-model="editFrom.value" placeholder="请选择模板类型">
                    <el-option v-for="(item, index) in data.datasources" :label="item.codeName"
                        :value="item.code" :key="index" />
                </el-select>
            </el-form-item>
            <el-form-item label="备用AI模型" prop="spareValue">
                <el-select v-model="editFrom.spareValue" placeholder="请选择模板类型">
                    <el-option v-for="(item, index) in data.datasources" :label="item.codeName"
                        :value="item.code" :key="index" />
                </el-select>
            </el-form-item>
        </MyForm>
    </MyDialog>
    <!-- 删除配置 -->
    <MyMessageBox ref="delMessageBox" @confirm="delTempplate($event)"/>
</template>

<script lang="ts" setup>
    import { reactive, ref, getCurrentInstance, unref, onMounted } from 'vue'
    import { ElMessage } from 'element-plus'
    import type { FormInstance, FormRules } from 'element-plus'
    import CardTitle from '@/components/CardTitle.vue';
    import CardList from '@/components/CardList.vue';
    import MyForm from '@/components/MyForm.vue'
    import MyDialog from '@/components/MyDialog.vue'
    import MyMessageBox from '@/components/MyMessageBox.vue'
    import { List } from "/src/api/due/DataWarehouse.js";
    import { GetDataDictionaryTypes } from "@/api/common/dataDictionary.js"
    import { SaveItem, GetById, UpdateConfig, DeleteConfig } from '@/api/common/dueDiligenceConfig.js'
    /**
     *　form表单引用
     */
    const myFormRef = ref()
    /**
     * 增改删dialog引用
     */
    const addDialog = ref()
    const editDialog = ref()
    const delMessageBox = ref()
    /**
     * 卡片标题参数
     */
    const cardTitleParam = reactive({
        cardBgColor: "rgb(255, 208, 75)",
        titles: [
            { 'title': '仓库模块' },
            { 'title': '主数据源' },
            { 'title': '备用数据源' },
            { 'title': '新增数据仓库配置', 'type': 'button' }
        ]
    })
    /**
     * 卡片列表参数
     */
    const cardListParam = reactive({
        cardList: [],
        listField: ['keyName', 'valueName', 'spareValueName'],
        operates: [
            { 'opeateName': '配置模板及变量', 'opeateMethod': 'editTemplate' },
            { 'opeateName': '删除', 'opeateMethod': 'delTempplate' }
        ],
    })
    const data = reactive({
        warehouseModules:[],
        datasources: [],
        // 二级下拉框是否可以选择
        disabled: true,
        deletetId: ""
    })
    /**
     * 新增配置表单变量
     */
    const addFrom = reactive({
        sort: 'DUE_DILIGENCE_DATA_WAREHOUSE',
        sortName: '尽调数据仓库配置',
        key: '',
        value: '',
        spareValue:''
    })
    /**
     * 修改配置表单变量
     */
    const editFrom = ref({})
    /**
     * 初始化方法
     */
    onMounted(() => {
        queryList()
    })
    /**
     * 重置新增对话框
     */
    const resetAddForm = () => {
        myFormRef.value.resetForm();
        data.disabled = true 
    }
    /**
     * 打开新增对话框
     */
    const openAddDialog = () => {
        // 查询所有下拉框数据
        getAiModelAccessTypes()
        //打开弹出框
        addDialog.value.openDialog()
    }
    /**
     * 打开修改对话框
     */
    const openEditDialog = (id) => {
        // 查询所有下拉框数据
        getAiModelAccessTypes()
        // 查询待修改数据
        GetById(id)
            .then((response) => {
                // 编辑数据设置
                editFrom.value = response.data
                keyChange(editFrom.value.key)
                // 打开弹出框
                editDialog.value.openDialog()
            });
    }
    /**
     * 打开删除对话框
     */
    const openDelDialog = (id) => {
        data.deletetId = id
        delMessageBox.value.openMessageBox()
    } 
    /**
     * 新增配置
     */
    const addTemplate = (e) => {
        myFormRef.value.checkParam()
            .then((res) => {
                SaveItem(addFrom)
                    .then((response) => {
                        ElMessage({
                            message: '新增配置成功！',
                            type: 'success',
                        })
                        // 重置表单
                        resetAddForm()
                        queryList()
                        e.callback(true)
                    }).catch((error) => {});
            })
            .catch((err) => {
            })
    }
    /**
     * 修改模板配置
     */
    const editTemplate = (e) => {
        myFormRef.value.checkParam()
            .then((res) => {
                UpdateConfig(editFrom.value)
                    .then((response) => {
                        ElMessage({
                            message: '修改增配置成功！',
                            type: 'success',
                        })
                        queryList()
                        e.callback(true)
                    }).catch((error) => {});
            })
            .catch((err) => {
            })
    }
    /**
     * 删除模板配置
     */
    const delTempplate = (e) => {
        DeleteConfig(data.deletetId)
            .then((response) => {
                queryList()
                e.callback(true)
            }).catch((error) => {
                queryList()
                e.callback(true)
             });
    }
    /**
     * 获取AI接入点下拉框数据
     */
    const getAiModelAccessTypes = () => {
        GetDataDictionaryTypes("WAREHOUSE_MODULE")
            .then((response) => {
                data.warehouseModules = response.data.content;
            });
    }
    /**
     * key的值改变事件处理，查询该值对应的value
     */
    const keyChange =(key) => {
        addFrom.value = ''
        addFrom.spareValue = ''
        GetDataDictionaryTypes(key)
            .then((response) => {
                data.datasources = response.data.content;
                data.disabled = false
            });
    }
    /**
     * 查询列表
     */
    const queryList = () => {
        List()
            .then((response) => {
                cardListParam.cardList = response.data.content;
            });
    }
    /**
     * 表单检验规则
     */
    const rules = reactive<FormRules<RuleForm>>({
        key: [
            {required:true, message:'请选择仓库模块', trigger:'change'}
        ],
        value: [
            {required:true, message:'请选择主数据源！', trigger:'change'}
        ],
        spareValue: [
            {required:true, message:'请选择备用数据源！', trigger:'change'}
        ]
    })
</script>

<style scoped></style>